﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Xonix mega cool game</title>
    <!--<script src="scripts/jquery.min.js"></script>-->
    <link href="styles/style.css" rel="stylesheet" />
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
     <link href="styles/jquery-ui-1.10.3.custom.css" rel="stylesheet" />

    <script src="scripts/jquery-1.10.1.js"></script>
    <script src="scripts/kendo.web.min.js"></script>
    <script src="scripts/jquery-ui-1.10.3.custom.js"></script>
  <script>
      $(function () {
          $("#radio").buttonset();
      });
  </script>
</head>
<body>
    <header>
        <h1>Cool XONIX game</h1>
    </header>

    <canvas id="playfield" width="700" height="400"></canvas>

    <a href="#" id="reset-button">Reset</a>

    <div id="game-options">
        <div class="demo-section" id="color-section">
            <div id="color-picker">
                <h2>Pick a playground color</h2>
                <div class="product-display">
                    <div id="color-chooser"></div>
                </div>
            </div>
        </div>

        <img id="grandMa" src="styles/img/grandMaPlayer.png" style="display: none;" />
        <img id="grandPa" src="styles/img/grandPaPlayer.png" style="display: none;" />

        <div class="demo-section" id="players-section">
            <h2>Pick a player</h2>
            <input id="players" style="width: 400px;" />
        </div>

        <div id="levels-section" class="demo-section">
            <h2>Pick a level difficulty</h2>
             <form>
                 <div id="radio">
                    <label for="radio1">Easy</label>
                    <input type="radio" name="levels" value="Easy" id="radio1" checked="checked" class="difficulty" />
                    <label for="radio2">Medium</label>
                    <input type="radio" name="levels" value="Medium" id="radio2" class="difficulty"/>
                    <label for="radio3">Hard</label>
                    <input name="levels" type="radio" value="Hard" id="radio3" class="difficulty"/>
                </div>
         </form>
        </div>

    </div>
    <div id="facebook-buttons">
        <div id="fb-root"></div>
        <div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>
        <div class="fb-like" data-href="http://www.facebook.com/TelerikAcademy?fref=ts" data-send="false" data-width="450" data-show-faces="true"></div>
    </div>

    <script src="scripts/facebook.js"></script>
    <script src="scripts/kendo.js"></script>
    <script src="scripts/ClassicalOOPExtensions.js"></script>
    <script src="scripts/CellTopLeft.js"></script>
    <script src="scripts/Cell.js"></script>
    <script src="scripts/GameRules.js"></script>
    <script src="scripts/player.js"></script>
    <script src="scripts/GameDraw.js"></script>
    <script src="scripts/Playfield.js"></script>
    <script src="scripts/enemy.js"></script>
    <script src="scripts/events.js"></script>
    <script src="scripts/xonix.js"></script>
</body>

</html>
